<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat, toYuan } from '@/hooks/util'
import * as xyApi from '@/api/xy'
import * as accountApi from '@/api/account'
import { message, Empty } from 'ant-design-vue'
import PullXyRobot from '@/components/PullRobot/PullXyRobot.vue'
import MarkList from './components/MarkList.vue'

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const route = useRoute()

let loading = ref<boolean>(false)

interface SearchParams {
  [propName: string]: any
}
const searchParams = ref<SearchParams>({})

interface DataSourceItem {
  onOff: number
  categoryId: number
  categoryName: string
  keywordsList: Array<string>
}
const dataSource = ref<Array<DataSourceItem>>([])
const getList = async () => {
  dataSource.value = []
  loading.value = true
  try {
    let { state, data, message: msg } = await xyApi.getFishIndustryCategory(searchParams.value)
    if (state === 200) {
      console.log(data)
      dataSource.value.push(data[0])
      console.log('dataSource=', dataSource.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

let okRobat = ref<string>('')
const selectRobot = (id: string) => {
  okRobat.value = id
  searchParams.value.robotId = id
  getList()
}

const handleChange = (item: any) => {
  item.onOff == 1 ? (item.onOff = 0) : (item.onOff = 1)
}

const okKeyList = (list: any, categoryId: number) => {
  // console.log('list=', list)
  // console.log('categoryId=', categoryId)
  dataSource.value.forEach(item => {
    if (item.categoryId == categoryId) {
      item.keywordsList = list
    }
  })

  // console.log('dataSource=', dataSource.value)
}

// -----------------------
onMounted(() => {
  getRobatList()
  getGroupList()
})

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

// 拉取
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = {
    currentPage: 1,
    pageSize: 100,
  }
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotList(params)
    if (state === 200) {
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })
      optionsArr.value = data.list
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 推送
import type { SelectProps } from 'ant-design-vue'
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const optionsArr = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: any) => {
  groupId.value = selectValue as string
  sendRobat.value = optionsArr
    .value!.filter(item => item.groupId == groupId.value)
    .map(item => item.id)
}

// 推送配置
let sendRobat = ref<Array<string>>()
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
}
const pushRobot = async () => {
  // console.log('okRobat=', okRobat.value)
  // console.log('sendRobat=', sendRobat.value)
  // console.log('dataSource=', dataSource.value)

  let params = {
    robotIds: sendRobat.value,
    dtoList: dataSource.value,
  }
  try {
    const { state, message: msg } = await xyApi.fishIndustryCategoryPushRobots(params)
    if (state === 200) {
      message.success('操作成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card>
      <a-alert
        description="tips:系统根据不同行业，运行行业自动化流程"
        type="info"
        banner
        style="margin-bottom: 10px"
      />
      <PullXyRobot @selectRobot="selectRobot"></PullXyRobot>

      <a-row :gutter="16" v-if="dataSource.length != 0">
        <a-col
          :span="6"
          v-for="(item, index) in dataSource"
          :key="item.categoryId"
          style="min-width: 430px"
        >
          <div class="card">
            <!-- 开关 -->
            <div class="top">
              <div style="font-weight: bold; flex: 1">
                {{ item.categoryName }}
              </div>
            </div>

            <!-- 内容 -->
            <div style="padding-bottom: 10px; display: flex">
              <div>
                <div style="min-width: 100px">标题包含词：</div>
                <div class="leftImg" v-if="item.categoryName == '电影票'">
                  <img src="../../../assets/logoCopy.png" alt="" />
                </div>
                <div class="leftImg" v-if="item.categoryName == '瑞幸'">
                  <img src="../../../assets/coffee.webp" alt="" />
                </div>
              </div>
              <div style="min-height: 186px">
                <MarkList
                  :list="item.keywordsList"
                  :id="item.categoryId"
                  @okList="okKeyList"
                ></MarkList>
              </div>
            </div>

            <!-- 底部 -->
            <div class="bottom">
              <div style="font-weight: bold; flex: 1">功能开关</div>
              <div style="font-weight: bold; flex: 1; text-align: right; padding-right: 10px">
                <a-switch :checked="item.onOff == 1 ? true : false" @change="handleChange(item)" />
              </div>
              <!-- <div style="flex: 1; text-align: right"><a>编辑</a></div> -->
            </div>
          </div>
        </a-col>
      </a-row>

      <div v-else class="kong-div">
        <a-empty :image="simpleImage" />
      </div>

      <!-- 推送 -->
      <div style="margin: 25px 0 5px 0">
        <span>选择推送闲鱼账号：</span>
        <a-select
          style="width: 150px"
          placeholder="请选择分组"
          v-model:value="groupId"
          @change="selectGroup"
        >
          <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
            {{ item.groupName }}
          </a-select-option>
        </a-select>
        <a-select
          style="width: 50%; margin-left: 5px"
          placeholder="请选择"
          mode="multiple"
          v-model:value="sendRobat"
          @change="selectSendRobat"
          allowClear
          show-search
          :options="optionList"
          :filter-option="filterOption"
        >
          <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <a-button type="primary" style="margin-left: 10px" @click="sendOk">确认推送</a-button>
      </div>
    </a-card>
  </page-container>
</template>

<style lang="less" scoped>
.card {
  background: #ffffff;
  padding: 15px 20px 15px 20px;
  border-radius: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(240, 242, 245, 0.5);
}

.card:hover {
  transform: translateY(5px); // 鼠标悬停时，卡片向上浮动一点
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.top {
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 10px;
  padding-bottom: 5px;
  display: flex;
}

.bottom {
  display: flex;
  border-top: 1px solid #f0f2f5;
  padding-top: 5px;
}

.leftImg {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  // background-color: aqua;
  margin-top: 20px;

  img {
    width: 100%;
    height: 100%;
  }
}

.kong-div {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0;
}
</style>
